<template>
    <div class="configCenter">
      <el-row style="height:100%">
        <el-col :span="12" class="configCtn">
          <div class="title">
            消费类型
            <el-button type="primary" plain icon="el-icon-plus" size="medium" @click="addConsumer" class="addBtn">添加</el-button>
          </div>
          <ul class="contentList">
            <li v-for="(item,index) in consumerTypeList" :key="item.id" class="item">
              <span>{{index+1 +"："+item.type}}</span>
              <i class="el-icon-close itemDel" @click="delConsumer(item.id)"></i>
            </li>
          </ul>
        </el-col>
        <el-col :span="12" class="configCtn">
          <div class="title">
            支付类型
            <el-button type="primary" plain icon="el-icon-plus" size="medium" @click="addPayment" class="addBtn">添加</el-button>
          </div>
          <ul class="contentList">
            <li v-for="(item,index) in paymentTypeList" :key="item.id" class="item">
              <span>{{index+1 +"："+item.type}}</span>
              <i class="el-icon-close itemDel" @click="delPayment(item.id)"></i>
            </li>
          </ul>
        </el-col>
      </el-row>
    </div>
</template>
<script>
import axios from "axios"

export default {
  name:"configCenter",
  components: {
  },
  props:{},
  data(){
    return {
      // 消费类型
      consumerTypeList:[],
      // 支付类型
      paymentTypeList:[],
      dialogFormVisible:false,
      form:{
        name:"",
        region:""
      }
    }
  },
  mounted() {
    // 获取消费类型列表
    this.getCustomer()
    // 获取支付类型列表
    this.getpayment()
  },
  methods:{
    // 获取消费类型列表
    getCustomer(){
      const that = this;
      axios.get('/consumer/list')
      .then(function ({data}) {
        if (data.code === 200 && data.data) {
          that.consumerTypeList = data.data
        }
      })
      .catch(function (error) {
        console.log(error);
      });
    },
    // 获取支付类型列表
    getpayment(){
      const that = this;
      axios.get('/payment/list')
      .then(function ({data}) {
        if (data.code === 200 && data.data) {
          that.paymentTypeList = data.data
        }
      })
      .catch(function (error) {
        console.log(error);
      });
    },
    // 删除一条消费类型
    delConsumer(id){
      this.$confirm('若此消费类型已被引用，删除后引用此消费类型的消费数据将会展示有误，确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const that = this;
        axios.post("/consumer/delete/" + id)
        .then(function ({data}) {
          if (data && data.code === 200) {
            that.$message({ type: 'success', message: '删除成功'});
            that.getCustomer()
          } else {
            that.$message({ type: 'success', message: '删除失败'});
          }
        })
        .catch(function (error) {
          that.$message({ type: 'success', message: '接口报错'});
          console.log(error);
        });
      })
      
    },
    // 删除一条支付类型
    delPayment(id){
      this.$confirm('若此支付类型已被引用，删除后被引用此支付类型的消费数据将会展示有误，确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const that = this;
        axios.post("/payment/delete/" + id)
        .then(function ({data}) {
          if (data && data.code === 200) {
            that.$message({ type: 'success', message: '删除成功'});
            that.getpayment()
          } else {
            that.$message({ type: 'success', message: '删除失败'});
          }
        })
        .catch(function (error) {
          that.$message({ type: 'success', message: '接口报错'});
          console.log(error);
        });
      })
    },
    // 添加消费类型
    addConsumer(){
      const that = this;
      this.$prompt('请输入消费类型', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        const that = this;
        axios.post('/consumer/create', {type:value})
        .then(function ({data}) {
          if (data && data.code === 200) {
            that.$message({ type: 'success', message: '新建成功'});
            that.getCustomer()
          } else {
            that.$message({ type: 'success', message: '新建失败'});
          }
        })
        .catch(function (error) {
          that.$message({ type: 'success', message: '接口报错'});
          console.log(error);
        });
      }).catch(() => {});
    },
    // 添加支付类型
    addPayment(){
      this.$prompt('请输入支付类型', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        const that = this;
        axios.post('/payment/create', {type:value})
        .then(function ({data}) {
          if (data && data.code === 200) {
            that.$message({ type: 'success', message: '新建成功'});
            that.getpayment()
          } else {
            that.$message({ type: 'success', message: '新建失败'});
          }
        })
        .catch(function (error) {
          that.$message({ type: 'success', message: '接口报错'});
          console.log(error);
        });
      }).catch(() => {});
    },
  }

}
</script>
<style scoped lang="less">
.configCenter{
  width: 100%;
  height: 100%;
  .configCtn{
    text-align: left;
    height: 100%;
    .title{
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      color: #333;
      position: relative;
      &::before{
        content:"";
        display: inline-block;
        width: 2px;
        height: 14px;
        background: #398bf7;
        border-radius: 10px;
        margin-right: 5px;
      }
      .addBtn{
        position: absolute;
        left: 240px;
      }
    }
    .contentList{
      position: relative;
      padding: 10px;
      height: calc(~"100% - 40px");
      overflow: auto;
      .item{
        cursor: pointer;
        font-size: 14px;
        height: 36px;
        line-height: 36px;
        border-radius: 4px;
        width: 300px;
        margin-bottom: 5px;
        padding: 0 10px;
        background: rgba(119,123,131,.08);
        .itemDel{
          display: none;
          float: right;
          font-size: 16px;
        }
        &:hover{
          background: rgba(40,110,240,.08);
          .itemDel{
            position: relative;
            top:10px;
            display: inline-block;
            }
        }
      }
    }
  }
}
</style>

